<template>
  <div class="Audio">
    <!-- <div class="MpBg" :class="bgUrl"></div> -->
    <audio class="MPAudio" :src="prize.grand === '一等奖' ? FirstPrize : LuckPrize" controls="controls" ref="audio">
      Your browser does not support the audio element.
    </audio>
  </div>
</template>
<script>
const FirstPrize = require('@/assets/mp3/一等奖.mp3')
const LuckPrize = require('@/assets/mp3/幸运盲盒.mp3')

export default {
  props: {
    prize: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      FirstPrize,
      LuckPrize,
      bgUrl: 'stoping' // starting
    }
  },
  methods: {
    playAndStop() {
      const audio = this.$refs.audio
      if (audio.paused) {
        audio.play()
        this.bgUrl = 'starting'
      } else {
        this.bgUrl = 'stoping'
        audio.currentTime = 0
        audio.pause()
      }
    }
  }
}
</script>
<style scoped lang="scss">
.Audio {
  display: flex;
  position: relative;
  .MpBg {
    position: absolute;
    z-index: 100;
    left: -8px;
  }
  .stoping {
    background: url('@/assets/bgStop.png');
    background-repeat: no-repeat;
    // width: 570px;
    -moz-background-size: 100% 100%;
    background-size: 100% 100%;
    height: 54px;
    width: 54px;
    border-radius: 27px;
  }
  .starting {
    background: url('@/assets/bgStart.png');
    animation: rotating 1.2s linear infinite;
    background-repeat: no-repeat;
    // width: 570px;
    -moz-background-size: 100% 100%;
    background-size: 100% 100%;
    height: 54px;
    width: 54px;
    border-radius: 27px;
    position: fixed;
    left: 20px;
  }
  .MPAudio {
    display: none;
    width: 100% !important;
  }
}
@keyframes rotating {
  from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
</style>
